import { Button, Divider, Flex, Form, Input, message, Modal, Select } from 'antd';
import { useIntl } from 'umi';

import choose from '@/assets/choose.png';
import company from '@/assets/company_user.png';
import userIcon from '@/assets/contact_user.png';
import logo from '@/assets/logo.png';
import nochoose from '@/assets/no_choose.png';
import { handleParams, handleResiterByContact, sendMobileCodeNT } from '@/services/login';
import { formatNumber } from '@/utils';
import { genderOptions, phonePattern } from '@/utils/common';
import { useRequest } from 'ahooks';
import { useEffect, useState } from 'react';
type Props = {
  visible: boolean;
  handleCancel: () => void;
};
let timer: any = null;
const ContactModal: React.FC<Props> = ({ visible, handleCancel }) => {
  const intl = useIntl();
  const isEn = intl.locale == 'en-US';
  const [form] = Form.useForm();
  const sex = Form.useWatch('sex', form);
  const values = Form.useWatch([], form);
  const [submittable, setSubmittable] = useState<boolean>(false);
  const [count, setCount] = useState(0);
  const { data } = useRequest(() => handleParams({ code: 'Auth_Amount' }), { ready: visible });
  const configList = data?.data?.Auth_Amount[0].value.split(',').map((item: any) => {
    return {
      label: formatNumber(item),
      value: item,
    };
  });
  //  防止频繁点击
  const [isClick, setIsClick] = useState(false);
  // 是否
  const [isFirstClick, setIsFirstClick] = useState(false);
  useEffect(() => {
    if (count == 59) {
      timer = setInterval(() => setCount((t) => t - 1), 1000);
    } else if (count <= 0) {
      clearInterval(timer);
    }
  }, [count]);

  useEffect(() => {
    if (values && Object.keys(values).length > 0) {
      form
        .validateFields({ validateOnly: true })
        .then(() => {
          setSubmittable(true);
        })
        .catch(() => setSubmittable(false));
    } else {
      setSubmittable(false);
    }
  }, [form, values]);

  const sendSuc = () => {
    setCount(59);
    setIsClick(false);
    setIsFirstClick(true);

    message.success(intl.formatMessage({ id: 'home.send_suc' }));
  };
  return (
    <Modal
      onCancel={handleCancel}
      footer={false}
      className="contact_modal"
      width={790}
      centered
      open={visible}
      styles={{
        content: {
          padding: '0',
        },
      }}
      destroyOnClose
    >
      <Flex gap={0} justify="space-between">
        <div
          style={{
            backgroundColor: '#123ba4',
            boxShadow: '6px 0px 6px -3px #00000040',
            borderTopLeftRadius: '12px',
            borderBottomLeftRadius: '12px',
            padding: '32px 24px 0px',
            textAlign: 'center',
            flex: 1,
          }}
        >
          <img src={logo} width={120} style={{ marginBottom: 12 }} height={27} />
          <div
            style={{
              padding: '14px 15px 31px',
              color: '#fff',
              borderRadius: 16,
              background:
                'linear-gradient(105.65deg, rgba(0, 43, 154, 0.6) 1.45%, rgba(2, 37, 127, 0) 29.68%, rgba(5, 47, 153, 0) 69.91%, rgba(0, 43, 154, 0.6) 101.39%)',
            }}
          >
            <div style={{ fontWeight: 500, fontSize: 18, marginBottom: 14 }}>
              {intl.formatMessage({ id: 'home.target_command' })}
            </div>
            <div style={{ fontWeight: 500, fontSize: 14, textAlign: 'left', lineHeight: '20px' }}>
              {intl.formatMessage({ id: 'home.alex_info' })}
            </div>
          </div>
          <Flex justify="center" align="center" style={{ padding: '5px 0 26px' }} gap={10}>
            <img src={userIcon} width={46} height={46} />

            <div style={{ fontWeight: 500, color: '#fff', lineHeight: '25px', fontSize: 18 }}>
              <Flex gap={11}>
                <span>ALEX</span> CHOU
              </Flex>
              <div> {intl.formatMessage({ id: 'home.high_manager' })}</div>
            </div>
          </Flex>
          <img src={company} width={340} height={58} />
        </div>
        <div style={{ flex: 1, padding: '33px 46px 20px 45px' }}>
          <div
            style={{
              fontSize: isEn ? 13 : 20,
              fontWeight: 600,
              color: '#000',
              marginBottom: 8,
              display: !isEn ? 'flex' : 'block',
            }}
          >
            {intl.formatMessage({ id: 'home.need_loan' })}
            <div> {intl.formatMessage({ id: 'home.need_loan1' })}</div>
          </div>
          <div style={{ width: 300 }}>
            <Form
              onFinish={async (value) => {
                const { phone, captcha } = value;
                const { code } = await handleResiterByContact({ mobile: phone, captcha });
                if (code === '100200') {
                  message.success(intl.formatMessage({ id: 'home.contact_suc' }));
                }
              }}
              form={form}
              colon={false}
              requiredMark={false}
              labelCol={{ span: 0 }}
            >
              <Form.Item
                rules={[{ required: true }]}
                name="name"
                label={intl.formatMessage({ id: 'home.contact_name' })}
              >
                <Input
                  style={{ color: '#0f294d', height: 36 }}
                  placeholder={intl.formatMessage({ id: 'home.contact_name' })}
                />
              </Form.Item>
              <Flex style={{ marginBottom: 17 }} align="center" justify="space-between">
                <Form.Item rules={[{ required: true }]} name="sex" hidden />

                {genderOptions.map((item) => {
                  const { label, value } = item;
                  const isActive = sex == value;
                  return (
                    <Flex
                      key={value}
                      gap={8}
                      onClick={() => {
                        form.setFieldValue('sex', value);
                      }}
                      align="center"
                      style={{
                        borderRadius: 6,
                        border: '1px solid #d9d9d9',
                        height: 36,
                        paddingLeft: 38,
                        fontSize: 18,
                        fontWeight: 400,
                        color: isActive ? '#333' : '#868686',
                        width: 145,
                        cursor: 'pointer',
                      }}
                    >
                      <img width={14} height={14} src={isActive ? choose : nochoose} />
                      {label}
                    </Flex>
                  );
                })}
              </Flex>

              <Form.Item
                label={intl.formatMessage({
                  id: 'login.phone.input',
                })}
                rules={[{ required: true }, phonePattern]}
                name="phone"
                validateTrigger="onBlur"
              >
                <Input
                  prefix={<div style={{ color: '#000' }}>+852</div>}
                  style={{ height: 36 }}
                  placeholder={intl.formatMessage({
                    id: 'login.phone.input',
                  })}
                />
              </Form.Item>

              <Form.Item
                noStyle
                shouldUpdate={(prevValues, curValues) => prevValues.phone !== curValues.phone}
              >
                {({ getFieldValue }) => {
                  const mobile = getFieldValue('phone');
                  return (
                    <Form.Item
                      label={intl.formatMessage({ id: 'login.captcha' })}
                      rules={[{ required: true }]}
                      name="captcha"
                    >
                      <Input
                        suffix={
                          <>
                            <Divider type="vertical" />
                            <Button
                              disabled={!mobile}
                              onClick={async () => {
                                if (isClick || !!count) {
                                  return false;
                                }

                                setIsClick(true);
                                const params = { valType: '3' };
                                try {
                                  await sendMobileCodeNT({
                                    mobile,
                                    ...params,
                                  });

                                  sendSuc();
                                } catch {
                                  setIsClick(false);
                                }
                              }}
                              className="login_code_btn"
                              style={{
                                border: 'none',
                                background: 'none',
                                padding: '0',
                                boxShadow: 'none',
                              }}
                            >
                              {count == 0
                                ? isFirstClick
                                  ? intl.formatMessage({ id: 'login.phone.send' })
                                  : intl.formatMessage({ id: 'login.get' })
                                : intl.formatMessage({ id: 'login.count' }, { count: count })}
                            </Button>
                          </>
                        }
                        style={{ height: 36 }}
                        placeholder={intl.formatMessage({ id: 'login.captcha' })}
                      />
                    </Form.Item>
                  );
                }}
              </Form.Item>
              <Form.Item
                rules={[
                  {
                    required: true,
                    message: intl.formatMessage({
                      id: 'home.choose_loan_scope',
                    }),
                  },
                ]}
                name="amount"
              >
                <Select
                  options={configList}
                  style={{ height: 36 }}
                  placeholder={intl.formatMessage({
                    id: 'home.loan_scope',
                  })}
                />
              </Form.Item>

              <Form.Item>
                <Button
                  block
                  disabled={!submittable}
                  htmlType="submit"
                  type="primary"
                  className="contact_modal_btn"
                  style={{
                    height: 40,

                    fontSize: 18,
                    fontWeight: 400,
                  }}
                >
                  <div>{intl.formatMessage({ id: 'home.contact_now' })}</div>
                </Button>
              </Form.Item>
            </Form>
            <div
              style={{ color: '#777', textAlign: 'center', lineHeight: '16px', marginBottom: 3 }}
            >
              {intl.formatMessage(
                { id: 'home.contact_submit' },
                {
                  word: (
                    <span style={{ color: '#123ba4' }}>
                      {intl.formatMessage({ id: 'home.contact_min' })}
                    </span>
                  ),
                },
              )}
              {isEn ? <div>{intl.formatMessage({ id: 'home.contact_submit1' })}</div> : null}
            </div>
          </div>
        </div>
      </Flex>
    </Modal>
  );
};

export default ContactModal;
